<template>
    <div class="a-line-header" :class="[
        `color-${props.color}`,
        `size-${props.size}`,
        { top: props.top },
        { right: props.right },
        { bottom: props.bottom },
        { left: props.left },
        `c-square-${props.size}`,
    ]">
        <div class="item top" v-if="props.top"></div>
        <div class="item right" v-if="props.right"></div>
        <div class="item bottom" v-if="props.bottom"></div>
        <div class="item left" v-if="props.left"></div>
    </div>
</template>

<style lang="scss" scoped>
@use "sass:math";
@import "../scss/vars";

.a-line-header {
    display: inline-block;
    position: relative;

    @each $colorPackageName, $colorPackageValue in $colorPackages {
        $frontColor: map-get($colorPackageValue, "frontColor");
        $bgColor: map-get($colorPackageValue, "bgColor");

        &.color-#{$colorPackageName} {
            .item {
                background-color: $bgColor;
            }
        }
    }

    @each $sizePackageName, $sizePackageValue in $sizePackages {
        &.size-#{$sizePackageName} {
            $size: map-get($sizePackageValue, "size");

            $itemWidth: $size * 0.5;
            $lineWidth: 1px;
            $space: math.div($size, 2) - $itemWidth;

            .item {
                position: absolute;

                &.top {
                    width: $lineWidth;
                    height: $itemWidth;
                    top: $space;
                    left: math.div($size, 2) - math.div($lineWidth, 2);
                }

                &.right {
                    width: $itemWidth;
                    height: $lineWidth;
                    top: math.div($size, 2) - math.div($lineWidth, 2);
                    left: math.div($size, 2);
                }

                &.bottom {
                    width: $lineWidth;
                    height: $itemWidth;
                    top: math.div($size, 2);
                    left: math.div($size, 2) - math.div($lineWidth, 2);
                }

                &.left {
                    width: $itemWidth;
                    height: $lineWidth;
                    top: math.div($size, 2) - math.div($lineWidth, 2);
                    left: $space;
                }
            }
        }
    }
}
</style>

<script setup lang="ts">
import { ColorType, SizeType } from '@/types'


export interface PropsType {
    color?: ColorType
    size?: SizeType
    top?: boolean
    right?: boolean
    bottom?: boolean
    left?: boolean
}

const props = withDefaults(defineProps<PropsType>(), {
    color: 'default',
    size: 'm',
    top: false,
    right: false,
    bottom: false,
    left: false,
})
</script>